<template>
  <div class="fenlei">
    <!-- 头部 -->
    <van-row class="bacc" style="position:fixed;z-index: 1;width: 100%;">
      <van-col span="4" style="overflow: hidden">
        <img
          class="icon"
          src="../assets/icon.png"
          v-if="!$store.state.islogin"
        />
        <van-image
          v-else
          round
          width="40px"
          :src="$store.state.avatar"
          style="margin: 5px 0px 0px 10px;"
        />
      </van-col>
      <van-col span="15">
        <!-- 搜索框 -->
        <van-search
          class="bacc index_header_search"
          v-model="search"
          shape="round"
          placeholder="请输入搜索关键字"
          maxlength="50"
          @search="onSearch"
        >
        </van-search>
      </van-col>
      <!-- 搜索按钮 -->
      <van-button
        type="info"
        size="small"
        style="margin: 12px 0px 0px 17px;"
        @click="onSearch"
        >搜索</van-button
      >
    </van-row>

    <!-- 侧边栏导航 -->
    <van-row>
      <van-col span="5">
        <van-sidebar v-model="sidebarKey" class="sidebarclass">
          <van-sidebar-item
            v-for="(item, inx) in sidBtnList"
            :key="inx"
            :title="item.name"
          />
        </van-sidebar>
      </van-col>

      <!-- 导航栏内容 -->
      <van-col span="19">
        <div class="cellGroup" v-if="topNav">
          <van-cell-group> <van-cell />{{ search }} </van-cell-group>
        </div>

        <div class="cellGroup" v-else>
          <van-cell-group>
            <van-cell />{{ sidBtnList[sidebarKey].name }}
          </van-cell-group>
        </div>

        <!-- 图片 -->
        <div v-if="sidebarKey == this.sidebarKey" class="gridFoods">
          <van-row v-model="contentKey">
            <div v-for="(item, inx) in foodslist" :key="inx" :title="item">
              <!-- 分类图像信息开始 -->
              <router-link :to="`/Xiangqing/${item.id}`">
                <van-col span="12">
                  <!-- 分类图像开始 -->
                  <van-image class="imageClass" :src="item.pic" />
                  <p class="nameClass">{{ item.name }}</p>
                  <!-- 分类图像结束 -->
                </van-col>
              </router-link>
              <!-- 分类图像信息结束 -->
            </div>
          </van-row>
        </div>
      </van-col>
    </van-row>

    <!-- 底部选项卡 -->
    <xrzp-tabbar></xrzp-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: "", //搜索内容
      contentKey: [], //保存图片内容
      sidebarKey: 0, //导航条的初始值为0
      topNav: false, //搜索内容的判断条件
      sidBtnList: [
        { classid: 324, name: "粥" },
        { classid: 351, name: "汤" },
        { classid: 352, name: "羹" },
        { classid: 326, name: "面" },
        { classid: 333, name: "馄饨" },
        { classid: 332, name: "汤圆" },
        { classid: 316, name: "腌菜" },
        { classid: 313, name: "药膳" },
        { classid: 335, name: "饺子" },
        { classid: 334, name: "馒头" },
        { classid: 341, name: "饼干" },
      ], //保存当前侧边导航条内容
      foodslist: [], //保存当前图片列表
    };
  },
  methods: {
    // 点击搜索发送请求
    onSearch() {
      console.log(`搜索关键字:${this.search}....`);
      if (this.search != "") {
        this.topNav = true;
        this.axios
          .get(
            `/jisuapi/search?keyword=${this.search}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`
          )
          .then((result) => {
            this.foodslist = result.data.result.result.list;
            // console.log(result.data.result.result.list);
            // 修改状态
            // this.$store.commit("Search", result.data.result.list);
          });
      } else {
        this.topNav = false;
        this.loadfoodslist(324, (list) => {
          this.foodslist = list;
        });
      }
    },
    loadfoodslist(classid, callback) {
      this.loading = true;
      this.axios
        .get(
          `/jisuapi/byclass?classid=${classid}
      &start=0&num=20&appkey=b0e7418fe9bef46dcb47a53374ffbef1`
        )
        .then((result) => {
          // console.log(result);
          console.log(`加载"${this.sidBtnList[this.sidebarKey].name}"分类...`);
          let foodslist = result.data.result.result.list;
          //  console.log(foodslist)
          // 立即调用callback，执行后续任务
          callback(foodslist);
        });
    },
  },
  loadMore() {
    let cid = this.name[this.sidebarKey];
    // console.log(`loadMore...cid:${cid} `);
  },
  watch: {
    //监听顶部导航
    sidebarKey(newval) {
      //滚动到顶部
      window.scrollTo(0, 0);
      this.search = "";
      // newval 即是切换到的类别cid,可以作为cid发请求
      // 发请求 更新列表
      this.loadfoodslist(this.sidBtnList[newval].classid, (list) => {
        this.foodslist = list;
      });
    },
    search() {
      if (this.search == "") {
        this.sidebarKey = 0;
        this.topNav = false;
        this.loadfoodslist(324, (list) => {
          this.foodslist = list;
        });
      }
    },
  },
  // 挂载之后
  mounted() {
    this.loadfoodslist(324, (list) => {
      this.foodslist = list;
    });
  },
};
</script>
<style>
.fenlei .icon {
  width: 45px;
  display: inline-block;
  margin: 4px 0 0 13px;
}
.fenlei .index_header_search {
  padding: 10px 0 10px 0;
}
.fenlei .searchBtn {
  margin: 12px 10px 5px 4px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  padding-left: 4px;
  padding-right: 4px;
}
/* 头部背景颜色 */
/* 统一样式 rgb(123, 183, 253) */
.fenlei .bacc {
  background-color: rgb(123, 183, 253);
}
.sidebarclass {
  position: fixed;
  font-weight: bold;
  margin: 50px 0 0 0;
}
.sidebarclass van-sidebar {
  width: 21.4%;
}
.cellGroup {
  width: 100%;
  text-align: left;
  font-size: 12px;
  background-color: rgb(245, 246, 248);
  position: fixed;
  z-index: 1;
  padding: 0 0 0 3px;
  font-weight: bold;
  margin: 54px 0 0 0;
}
.cellGroup .van-cell {
  background-color: rgb(245, 246, 248);
  padding: 8px 0 0 0;
}
.cellGroup .van-cell-group {
  background-color: rgb(245, 246, 248);
  margin: 0 0 9px 0;
}
.gridFoods {
  margin: 89px 0 75px 0px;
  width: 100%;
}
.imageClass {
  margin: 0 5px 0 0;
  width: 92%;
  height: 92%;
}
.nameClass {
  font-size: 10px;
  margin-left: 3px;
  font-weight: bold;
}
.sidebarclass .van-sidebar-item {
  line-height: 18px;
}
</style>
